<template>
    <div class="hello">
        <div class="el-card box-card is-always-shadow cc_cursor">
            <div class="el-card__header cc_cursor">
                <div class="clearfix cc_cursor">
                    <span>{{time || '00:00:00'}} 后免费抽奖</span>
                    <button type="button" class="el-button el-button--text" style="float: right; padding: 3px 0px;" @click="toResult">
                        <span>查看详细信息</span>
                    </button>
                </div>
            </div>
        </div>
        <div id="lottery" :style="showResult ? 'background-color: rgba(0,0,0,.6)' : ''">
            <div class="lottery-box">
                <div class="lottery-head">
                    <h1>幸运抽奖</h1>
                </div>
                <div class="lottery-content">
                    <div class="left-light sider-light">
                        <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                    </div>
                    <div class="top-light sider-light">
                        <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                    </div>
                    <div class="right-light sider-light">
                        <i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                    </div>
                    <div class="bottom-light sider-light">
                        <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
                    </div>
                    <div class="prize-content">
                        <ul class="clearfix" v-if="giftList.length">
                            <li class="lottery-0" :class="{'active': currentIndex === 0}">
                                <img :src="giftList[0].src" alt="">
                                <p>{{giftList[0].name}}</p>
                            </li>
                            <li class="lottery-1" :class="{'active': currentIndex === 1}">
                                <img :src="giftList[1].src" alt="">
                                <p>{{giftList[1].name}}</p>
                            </li>
                            <li class="lottery-2" :class="{'active': currentIndex === 2}">
                                <img :src="giftList[2].src" alt="">
                                <p>{{giftList[2].name}}</p>
                            </li>
                            <li class="lottery-7" :class="{'active': currentIndex === 7}">
                                <p class="thank">谢谢参与</p>
                            </li>
                            <li class="lottery" @click="start">
                                <p class="title">开始抽奖<br><span>剩余次数：<span>{{Number(isReady)}}</span>次</span></p>
                            </li>
                            <li class="lottery-3" :class="{'active': currentIndex === 3}">
                                <img :src="giftList[3].src" alt="">
                                <p>{{giftList[3].name}}</p>
                            </li>
                            <li class="lottery-6" :class="{'active': currentIndex === 6}">
                                <img :src="giftList[5].src" alt="">
                                <p>{{giftList[5].name}}</p>
                            </li>
                            <li class="lottery-5" :class="{'active': currentIndex === 5}">
                                <p class="thank">谢谢参与</p>
                            </li>
                            <li class="lottery-4" :class="{'active': currentIndex === 4}">
                                <img :src="giftList[4].src" alt="">
                                <p>{{giftList[4].name}}</p>
                            </li>
                        </ul>
                        <div class="prize-reason" v-if="showResult" :style="isResult ? '' : 'height: 2rem'">
                            <div>
                                <p class="res-title" v-if="isResult">恭喜获得</p>
                                <img v-if="isResult" :src="resultObj.src">
                                <p class="res-con">{{isResult ? resultObj.name : '谢谢参与'}}</p>
                                <span class="res-btn" @click="showResult = false">关闭</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="prize-bottom">
                    <div>
                        <h4>抽奖说明：</h4>
                        <p>1、 每12小时重置抽奖机会，10积分可兑换一次抽奖机会。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script src="./index.js"></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
    ul, li, p, div
        margin 0
        padding 0

    .clearfix
        overflow hidden

    li
        list-style none

    .time
        font-size 23px
        text-align center
        margin-top 80px

    #lottery
        .lottery-box
            width 440px
            height 620px
            position absolute
            top 50vh
            left 50%
            transform translate(-50%, -50%)

        .lottery-head
            width 250px
            height 40px
            line-height 40px
            border-radius 20px
            background-color #353535
            text-align center
            margin 0 auto

            h1
                font-size 24px
                margin 0
                color #E97424
                height 40px
                line-height 40px

                img
                    vertical-align middle
                    margin-right 10px
                    margin-top -20px

        .prize-close
            position absolute
            right -60px
            top -20px
            width 40px
            height 40px
            background-color #3F3F3F
            line-height 40px
            border-radius 50%
            text-align center
            color #fff
            font-size 20px
            cursor pointer

        .lottery-content
            position relative
            width 100%
            height 388px
            margin-top 20px
            border-radius 20px
            overflow hidden
            background-color #222

            .sider-light
                position absolute
                background-color #353535
                font-size 0

                i
                    display inline-block
                    width 10px
                    height 10px
                    border-radius 50%
                    box-shadow 0 0 20px rgba(204, 255, 255, .8)
                    vertical-align middle

            /*animation light 1s alternate infinite*/
            /*&:nth-child(2n)*/
            /*    animation light 1s linear 1s alternate infinite*/

            .left-light, .right-light
                width 24px
                top 24px
                height 332px
                left 0px
                text-align center

                i
                    display block
                    background-color #E97424
                    margin 0 auto 38px

                    &:first-child
                        margin-top 17px

                    &:last-child
                        margin-bottom 0

                    &:nth-child(2n)
                        background-color #FDBD40

            .right-light
                left auto
                right 0px

            .top-light, .bottom-light
                left 0px
                top 0px
                height 24px
                line-height 24px
                width 100%

                i
                    margin-right 38px
                    background-color #FDBD40

                    &:first-child
                        margin-left 23px

                    &:last-child
                        margin-right 0

                    &:nth-child(2n)
                        background-color #E97424

            .top-light
                border-radius 20px 20px 0 0

            .bottom-light
                top auto
                bottom 8px
                border-radius 0 0 20px 20px

        .prize-content
            padding 34px

            li
                display flex
                flex-direction column
                justify-content center
                align-items center
                float left
                width 120px
                height 100px
                border-radius 10px
                margin-right 6px
                margin-top 6px
                background-color #FFF2DA
                border 2px solid transparent
                box-sizing border-box
                cursor default
                text-align center

                &.active
                    border-color #E97424
                    border-width 5px

                &:nth-child(-n+3)
                    margin-top 0

                &:nth-child(3n)
                    margin-right 0

                &:nth-child(5)
                    background-color #E97424
                    cursor pointer
                    user-select none

                    .title
                        font-size 23px
                        color #fff
                        margin-top 20px

                    span
                        font-size: 16px
                        color #FFCC00

                img
                    width 50px
                    margin-top 10px

                p
                    font-size: 23px
                    color #E97424

                .thank
                    margin 0
                    padding 0
                    line-height 1rem
                    font-size 23px

            .prize-reason
                position absolute
                width 300px
                min-height 300px
                left 0px
                top 0px
                right 0px
                bottom 0px
                margin auto
                border-radius 20px
                background-color #353535
                overflow hidden
                color #fff
                text-align center

                & > div
                    position relative
                    z-index 2

                &:before
                    content ""
                    position absolute
                    width 200%
                    height 200%
                    border-radius 50%
                    left 50%
                    margin-left -100%
                    top -160%
                    background-color #222222

                .close-res
                    position absolute
                    right 5px
                    top 5px
                    width 30px
                    height 30px
                    border-radius 50%
                    color #fff
                    text-align center
                    line-height 30px
                    background-color rgba(0, 0, 0, .8)
                    cursor pointer

                .res-title
                    font-size 24px
                    line-height 60px

                img
                    width 1.5rem

                .res-con
                    line-height 50px
                    height 50px
                    font-size 22px
                    font-weight bold

                    &.no
                        font-size 16px
                        font-weight normal

                .res-btn
                    display block
                    margin 25px auto 0
                    width 120px
                    height 34px
                    line-height 34px
                    font-size 16px
                    color #fff
                    background-color #FECC32
                    border-radius 5px
                    cursor pointer
                    user-select none

        .prize-bottom
            margin-top 24px
            background-color #222222
            width 100%
            height 148px
            border-radius 20px
            position relative

            &::after, &::before
                content ""
                position absolute
                width 10px
                height 24px
                background-color #353535
                top -24px
                left 130px

            &::after
                left auto
                right 130px

            div
                width 100%
                height 140px
                border-radius 20px
                background-color #353535
                box-sizing border-box
                padding 10px 20px
                color #ddd
                line-height 1.1

                h4, p
                    font-size 16px
                    color #E97424

    @keyframes light
        0%
            box-shadow 0 0 5px rgba(204, 255, 255, .8)
        100%
            box-shadow 0 0 20px rgba(204, 255, 255, .8)

</style>

<style lang="less">
    @import url('https://unpkg.com/element-ui/lib/theme-chalk/index.css');
    .hello {
        .el-card {
            font-size: 23px;
            margin: 20px 20px;
        }
        .el-card__header {
            padding: 18px 20px;
        }
        .el-card__body {
            padding: 20px;
            .text {
                margin-bottom: 18px;
            }
        }
    }
</style>
